<template>
  <div>
    <common-head :title="$route.name" />
    <div class="wrap">
      <van-form @submit="onSubmit">
        <van-field
          v-model="contact.linkMan"
          :rules = "[
            {
              required: true,
              message: '请输入联系人姓名'
            }
          ]"
          label="姓名" placeholder="请输入收货名" />
        <van-field
          type="tel"
          v-model="contact.mobile"
          label="电话"
          :rules = "[
            {
              required: true,
              message: '请输入联系人姓名'
            },
            {
              pattern: /\d{11}/,
              message: '请输入合法的手机号'
            }
          ]"
          placeholder="收货人手机"
        />
        <van-field
          readonly
          :value="areaInfo"
          label="地区"
          @click="showArea"
          placeholder="选择省/市/区"
        />
        <van-field
          v-model="contact.address"
          label="详细地址"
          :rules = "[
            {
              required: true,
              message: '请输入详细地址'
            }
          ]"
          placeholder="街道/门牌、楼层房间号等信息"
        />
        <van-field
          type="number"
          v-model="contact.code"
          label="邮政编码"
           :rules = "[
            {
              pattern: /\d{6}/,
              message: '邮政编码'
            }
          ]"
          placeholder="邮政编码"
        />
        <van-cell center title="设为默认地址">
          <template #right-icon>
            <van-switch v-model="contact.isDefault" size="24" />
          </template>
        </van-cell>
        <van-button round block color="#ff734c" native-type="submit"
          >提交</van-button
        >
      </van-form>
      <van-button round @click="delContact" block type="danger"
          >删除</van-button
        >
      <!-- 弹出省市区三级联动 -->
      <van-popup v-model="isShow" position="bottom" :style="{ height: '40%' }" >
          <van-area @confirm="choseArea" @cancel="isShow = false" title="选择省市区" :area-list="areaList" />
      </van-popup>
      <!-- /弹出省市区三级联动 -->
    </div>
  </div>
</template>

<script>
import CommonHead from '../../components/CommonHead.vue'
import { areaList } from '@vant/area-data'
import { fetchContactDetail, updateContact, delContact } from '@api'
export default {
  components: { CommonHead },
  name: 'AddressUpdate',
  data () {
    return {
      // 省市区弹窗
      isShow: false,
      areaList,
      areaInfo: '', // 省市区名字
      contact: {
        // 添加的收货人
        linkMan: '',
        mobile: '',
        address: '',
        provinceId: '',
        cityId: '',
        districtId: '',
        code: '',
        isDefault: false
      }
    }
  },
  created () {
    this.fetchContact()
  },
  methods: {
    delContact () {
      // 删除联系人
      this.$dialog.confirm({
        title: '删除收货地址',
        message: '您确认删除嘛'
      })
        .then(() => {
          // on confirm
          delContact({
            id: this.$route.query.id,
            token: this.getToken()
          }).then(res => {
            if (res.data.code === 0) {
              this.$toast({
                type: 'success',
                message: '删除成功',
                duration: 1000,
                onClose: () => {
                  this.$router.replace('/addressLists')
                }
              })
            }
          })
        })
    },
    fetchContact () {
      // 获取修改的联系人详情数据
      fetchContactDetail({
        id: this.$route.query.id,
        token: this.getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.contact = res.data.data.info
          this.areaInfo = this.contact.provinceStr + '/' + this.contact.cityStr + '/' + this.contact.areaStr
        }
      })
    },
    onSubmit () {
      // 点击修改联系人
      updateContact({
        ...this.contact,
        token: this.getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.$toast({
            type: 'success',
            message: '修改成功',
            duration: 1000,
            onClose: () => {
              this.$router.replace('/addressLists')
            }
          })
        }
      })
    },
    choseArea (area) {
      // 省市区三级联动确认
      this.contact.provinceId = area[0].code
      this.contact.cityId = area[1].code
      this.contact.districtId = area[2].code
      this.areaInfo = area[0].name + '/' + area[1].name + area[2].name
      this.isShow = false
    },
    showArea () {
      // 显示省市区三级联动弹窗
      this.isShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  padding-top: 46px;
}
</style>
